<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4" :xs="24">
        <areas :areas="treeAreas" area-type="1" v-on:handleNodeClick="onHandleNodeClick"/>
      </el-col>
      <el-col v-loading="listLoading" :span="20" :xs="24">
        <el-card>
          <baidu-map :center="center" :scroll-wheel-zoom="true" class="map">
            <!--          <customer-over-lay v-for="marker of markers"  :position="{lng: marker.lng, lat: marker.lat}" :title="marker.name+'   '+marker.total+'套'"></customer-over-lay>-->
            <bm-info-window v-for="marker of markers" :height="0" :position="{lng: marker.lng, lat: marker.lat}"
                            :show="true" :title="marker.name" :width="0">
              <p>{{ '设备:   ' + marker.total + '套' }}</p>
            </bm-info-window>
          </baidu-map>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import areas from '@/components/area/AreaTree'
import {getList} from '@/api/gis'
import {getAreaTree} from "@/api/area";
import CustomerOverLay from "@/views/gis/components/CustomerOverLay";

export default {
  data() {
    return {
      center: '安徽省合肥市',
      markers: [],
      treeAreas: [],
      listLoading: true,
      queryParam: {
        area_code: '340100'
      }
    }
  },
  components: {
    CustomerOverLay,
    areas
  },
  created() {
    this.getList()
    this.getAreaTree()
  },
  methods: {
    getAreaTree(type) {
      getAreaTree({type: 2}).then(response => {
        this.treeAreas = response.data
      })
    },
    onHandleNodeClick: function (data) {
      if (this.queryParam.area_code != data.code) {
        this.queryParam.area_code = data.code
        this.center = data.address
        this.getList()
      }
    },
    getList() {
      this.listLoading = true
      getList(this.queryParam).then(response => {
        this.$nextTick(() => {
          this.markers = response.data.list
        })
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    }
  }
}
</script>
<style>
.map {
  width: 100%;
  height: 885px;
}

</style>
